<template>
    <div class="e-table">
        <div class="top">
            <div class="left">
                <div>
                    <el-button  class="btn-greenYellow" @click="paramsAdd">新增</el-button>
                    <el-button  class="btn-delete"  @click="deleteParams " v-if="isBatch">批量删除</el-button>
                </div>
                <div class="batchBox" @click="batchOperation">
                    <img class="batchicon" src="@/assets/piliang.png">
                    <span class="batchfont">{{batch}}</span>
                </div>
            </div>
        </div>
        <div class="errorMsg" v-if="errorMsg.length>0">
            <span v-for="item,index in errorMsg" :key="index">
                {{item}}
            </span>
        </div>
        <el-table
            :max-height="$store.state.tableHeight"
            class="table"
            ref="paramsTable"
            :data="paramsTableCopy"
            border
            style="width: 100%"
            @selection-change="paramsTableSelect"
            v-sortTable="{ 'tableData': paramsTableCopy, '_this': this, 'ref': 'paramsTable' }"
        >
            <el-table-column type="selection" width="55" align="center" v-if="isBatch">
            </el-table-column>
            <el-table-column fixed label="操作" width="70">
                <template slot-scope="{ row,$index }">
                    <div class="handle">
                        <div style=" cursor: pointer;">
                            <img src="@/assets/btn/delete.png"  @click="handleDelete(row,$index)">
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="parameterName" label="参数名称" min-width="300">
                <template slot-scope="{ row }">
                    <el-input v-model="row.parameterName" clearable  @input="curStateChange(row)"></el-input>
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="parameterValue" label="参数值" width="400">
                <template slot-scope="{ row }">
                    <el-input v-model="row.parameterValue" clearable  @input="curStateChange(row)"></el-input>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
import request from '@/api/equip/purchaseAcceptance.js'
export default {
    data () {
        return {
            isBatch: true, //是否进入批量操作
            batch: '进入批量管理',
            paramsTable: [],
            paramsTableCopy: [],
            paramsSelect: [],
            errorMsg: [],
            currentRow: {},
            leaseExitId: JSON.parse(localStorage.vuex).auditParams.id,
        }
    },
    created () {
        this.getTechnical()
    },
    watch: {
        paramsTable: {
            handler (val) {
                this.setAuditParams({ table: val })
            },
            deep: true
        }
    },
    methods: {
        ...mapMutations(['setAuditParams']),
        batchOperation () {
            this.isBatch = !this.isBatch
            if(this.isBatch) {
                this.batch = '退出批量管理'
                this.$refs.paramsTable.clearSelection()
            }else{
                this.batch = '进入批量管理'
            }
        },
        //获取参数信息
        getTechnical () {
            request.getTechnical(this.leaseExitId).then(res=>{
                this.paramsTableCopy = []
                this.paramsTable = res
                res.map(item=>{
                    this.paramsTableCopy.push(item)
                })
            })
        },
        //新增一行数据
        paramsAdd () {
            let obj = {
                'changeType': 1,
                'handoverPurchaseDtlId': this.leaseExitId,
                'parameterName': '',
                'parameterValue': '',
                'purchaseId': '',
                'technicalSpecificationId': ''
            }
            this.paramsTable.push(obj)
            this.paramsTableCopy.push(obj)
        },
        //判断当前状态是否已修改
        curStateChange (row) {
            this.currentRow.changeType = 2
            if (row.technicalSpecificationId) {
                this.currentRow = row
            }
        },
        //计划明细非空验证
        verifyTable () {
            return  new Promise((resolve, reject)=>{
                this.errorMsg = []
                this.paramsTableCopy.forEach((item, index)=>{
                    if(item.changeType !== -1) {
                        if(item.parameterName == null || item.parameterName == '') {
                            let str = `请填写第 ${index + 1} 行的（参数名称）`
                            this.errorMsg.push(str)
                        }
                        if(item.parametervalue == null || item.parametervalue == '') {
                            let str = `请填写第 ${index + 1} 行的（参数值）`
                            this.errorMsg.push(str)
                        }
                    }
                })
                if(this.errorMsg.length > 0) {
                    reject()
                }else{
                    resolve()
                }
            })
        },
        //单个删除
        handleDelete (row, $index) {
            this.clientPop('info', this.oneDeleteErr, ()=>{
                let length = this.errorMsg.length
                if(row.technicalSpecificationId) {
                    this.$set(this.paramsTable[$index], 'changeType', -1)
                    this.paramsTableCopy.splice($index, 1)
                }else{
                    this.paramsTable.splice($index, 1)
                    this.paramsTableCopy.splice($index, 1)
                }
                if (length > 0 ) {
                    this.verifyTable()
                }
            })
        },
        //获取参数信息表格的选择项
        paramsTableSelect (selection) {
            this.paramsSelect = selection
        },
        //删除参数信息
        deleteParams () {
            const length = this.paramsSelect.length
            if(length === 0) {
                this.clientPop(
                    'info',
                    '你还未选择数据,请选择!',
                )
            }else{
                this.clientPop(
                    'info',
                    this.moreDeleteErr(length),
                    this.delete
                )
            }
        },
        delete () {
            this.paramsSelect.filter(row=>{
                this.paramsTableCopy.map((x, index)=>{
                    if(row == x ) {
                        this.paramsTableCopy.splice(index, 1)
                    }
                })
                if(row.technicalSpecificationId) {
                    const index = this.paramsTable.findIndex(item=>{
                        return item.technicalSpecificationId == row.technicalSpecificationId
                    })
                    this.$set(this.paramsTable[index], 'changeType', -1)
                }else{
                    this.paramsTable.map((x, index)=>{
                        if(row == x ) {
                            this.paramsTable.splice(index, 1)
                        }
                    })
                }
                if (length > 0 ) {
                    this.verifyTable()
                }
                this.$refs.paramsTable.clearSelection()
            })
        },
    },
}
</script>

<style lang="sass" scoped></style>
